<template>
  <div class="">
    <el-dialog v-model="state.dialogVisible" append-to-body title="选择链接" center @close="closeDialog"
      class="borderRadius10" width="1280">
      <div class="table_box">
        <section class="left-tree-wrapper" style="display: flex;flex-direction: column;height: inherit;">
          <section>
            <el-tree :data="state.categoryData" node-key="id" highlight-current="true" default-expand-all>
              <template #default="{ data }">
                <section class="dirItem font16 flex-c" :class="{ isActive: state.currenType == data.type }"
                  @click="handleNodeClick(data)" style="justify-content: space-between; flex: 1;">
                  <section class="flex-c">
                    {{ data.name }}
                  </section>
                </section>
              </template>
            </el-tree>
          </section>
        </section>
        <div class="right_box" v-if="state.currenType == 'link'">
          <div v-if="state.basicsList.length">
            <div class="cont font16">基础链接 </div>
            <div class="Box">
              <el-button class="mt10 ml10" v-for="(item, index) in state.basicsList"
                :type="state.currenId == item.id && state.currenUrl == item.url ? 'primary' : ''" :key="index"
                @click="getUrl(item)"> {{ item.name
                }}</el-button>
            </div>
          </div>
          <div v-if="state.userList.length" class="mt10">
            <div class="cont font16 ">个人中心</div>
            <div class="Box">
              <el-button class="mt10 ml10 font16"  v-for="(item, index) in state.userList"
                :type="state.currenId == item.id && state.currenUrl == item.url ? 'primary' : ''" :key="index"
                @click="getUrl(item)"> {{ item.name
                }}</el-button>
            </div>
          </div>
          <div v-if="state.distributionList.length" class="mt10">
            <div class="cont font16">分销</div>
            <div class="Box">
              <el-button class="mt10 ml10" v-for="(item, index) in state.distributionList"
                :type="state.currenId == item.id && state.currenUrl == item.url ? 'primary' : ''" :key="index"
                @click="getUrl(item)"> {{ item.name
                }}</el-button>
            </div>
          </div>
        </div>
        <div class="right_box" v-if="state.currenType == 'marketing_link'">
          <div v-if="state.coupon.length" class="mt10">
            <div class="cont font16">优惠券</div>
            <div class="Box">
              <el-button class="mt10 ml10" v-for="(item, index) in state.coupon"
                :type="state.currenId == item.id ? 'primary' : ''" :key="index" @click="getUrl(item)"> {{ item.name
                }}</el-button>
            </div>
          </div>
          <div v-if="state.integral.length" class="mt10">
            <div class="cont font16">积分</div>
            <div class="Box">
              <el-button class="mt10 ml10" v-for="(item, index) in state.integral"
                :type="state.currenId == item.id ? 'primary' : ''" :key="index" @click="getUrl(item)"> {{ item.name
                }}</el-button>
            </div>
          </div>
          <div v-if="state.luckDraw.length" class="mt10">
            <div class="cont font16">抽奖</div>
            <div class="Box">
              <el-button class="mt10 ml10" v-for="(item, index) in state.luckDraw"
                :type="state.currenId == item.id ? 'primary' : ''" :key="index" @click="getUrl(item)"> {{ item.name
                }}</el-button>
            </div>
          </div>
        </div>
        <div class="right_box" v-if="state.currenType === 'special' ||
          state.currenType === 'product_category' ||
          state.currenType === 'product' ||
          state.currenType === 'videoProduct' ||

          state.currenType === 'seckill' ||
          state.currenType === 'bargain' ||
          state.currenType === 'combination' ||
          state.currenType === 'news' ||
          state.currenType === 'micro' ||
          state.currenType === 'integral'
        ">
          <section class="pageQueryBoxArea">
            <el-form :inline="true" ref="formValidate" :model="state.params" class="tabform"
              v-if="state.currenType == 'product' || state.currenType === 'videoProduct'">
              <el-form-item label="信息搜索：">
                <el-input class="width160" placeholder="请输入" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSearch()">
                  <el-icon> <ele-Search /> </el-icon> 搜 索
                </el-button>
              </el-form-item>
            </el-form>
          </section>
          <div class="cropper-warp">

            <el-table border ref="goodSkuListRef" v-if="state.currenType === 'product' ||
              state.currenType === 'videoProduct' ||
              state.currenType === 'seckill' ||
              state.currenType === 'bargain' ||
              state.currenType === 'combination'" @row-click="singleElection" v-loading="state.lodingList"
              :data="state.tableList.list" row-key="id">
              <el-table-column label="" width="50">
                <template #default="scope">
                  <el-radio class="radio" v-model="state.radioData" :label="scope.$index">

                  </el-radio>
                </template>
              </el-table-column>
              <el-table-column label="编码" width="90">
                <template #default="scope">
                  <span>{{ scope.row.skuId }}</span>
                </template>
              </el-table-column>

              <el-table-column label="图片">
                <template #default="scope">
                  <div style="display: flex;justify-content:center;align-items: center;">
                    <el-image style="width:32px;height: 32px;" :src="scope.row.imgUrl" fit="cover" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="商品名称">
                <template #default="scope">
                  <span> {{ scope.row.spuName }} {{ scope.row.skuList[0].skuSerialName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="类型">
                <template #default="scope">
                  <span>{{ scope.row.skuList[0].skuTypeName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="零售价">
                <template #default="scope">
                  <span>{{ scope.row.skuList[0].lowPrice }}</span>
                </template>
              </el-table-column>
              <el-table-column label="来源">
                <template #default="scope">
                  <span>{{ scope.row.sourceName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="销售渠道">
                <template #default="scope">
                  <span>{{ scope.row.salesChannelName }}</span>
                </template>
              </el-table-column>
            </el-table>
            <el-table border ref="goodSkuListRef" v-if=" state.currenType === 'news'"
             @row-click="singleElection" v-loading="state.lodingList" :data="state.tableList.list" row-key="id">
              <el-table-column label="" width="50">
                <template #default="scope">
                  <el-radio class="radio" v-model="state.radioData" :label="scope.$index">

                  </el-radio>
                </template>
              </el-table-column>
              <el-table-column label="编码" width="90">
                <template #default="scope">
                  <span>{{ scope.row.promiseId }}</span>
                </template>
              </el-table-column>

              <el-table-column label="图片">
                <template #default="scope">
                  <div style="display: flex;justify-content:center;align-items: center;">
                    <el-image style="width:32px;height: 32px;" :src="scope.row.imageInput" fit="cover" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="文章名称">
                <template #default="scope">
                  <span> {{ scope.row.promiseName }} </span>
                </template>
              </el-table-column>
  
            </el-table>



            <!-- <el-table row-key="id" ref="table" border v-loading="state.lodingList" :data="state.tableList.list"
              @row-click="singleElection" :tree-props="{ children: 'child', hasChildren: 'hasChildren' }" :max-height="state.currenType == 'product_category'
                ? '410'
                : state.currenType === 'product' ||
                  state.currenType === 'videoProduct' ||
                  state.currenType === 'seckill' ||
                  state.currenType === 'bargain' ||
                  state.currenType === 'combination' ||
                  state.currenType === 'news' ||
                  state.currenType === 'micro' ||
                  state.currenType === 'integral'
                  ? '400'
                  : ''
                ">

              <el-table-column label="" width="80">
                <template #default="scope">
                  <el-radio class="radio" v-model="state.radioData" :label="scope.$index">&nbsp;</el-radio>
                </template>
              </el-table-column>
              <el-table-column prop="spuId" label="ID" width="80"
                v-if="state.currenType === 'product'"></el-table-column>
              <el-table-column prop="promiseId" label="ID" width="80"
                v-else-if="state.currenType === 'news'"></el-table-column>
              <el-table-column prop="id" label="ID" width="80" v-else></el-table-column>

              <el-table-column v-if="state.currenType !== 'micro'" label="图片" width="80">
                <template #default="scope">
                  <el-image style="width: 50px; height: 50px" lazy :src="scope.row.imageInput" fit="fill"
                    v-if="state.currenType == 'news'"></el-image>
                  <el-image style="width: 50px; height: 50px" lazy :src="scope.row.data.categoryUrl" fit="fill"
                    v-else-if="state.currenType == 'product_category'"></el-image>
                  <el-image style="width: 50px; height: 50px" lazy
                    :src="scope.row.sku.skuImgUrl ? scope.row.sku.skuImgUrl : scope.row.sku.skuImgUrl" fit="fill"
                    v-else></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="spuName" label="商品名称" :show-overflow-tooltip="true" max-width="250"
                v-if="state.currenType === 'product' || state.currenType === 'micro'"></el-table-column>
              <el-table-column prop="text" label="分类名称" :show-overflow-tooltip="true" max-width="250"
                v-else-if="state.currenType == 'product_category'"></el-table-column>
              <el-table-column prop="promiseName" label="文章名称" :show-overflow-tooltip="true" max-width="250"
                v-else-if="state.currenType == 'news'"></el-table-column>
              <el-table-column prop="title" label="商品名称" :show-overflow-tooltip="true" max-width="250"
                v-else></el-table-column>
            </el-table> -->
            <el-row justify="end">
              <el-col :span="24" class="flex-end-center">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" class="mt15"
                  :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.params.pageNum" background
                  v-model:page-size="state.params.pageSize" layout="total, sizes, prev, pager, next, jumper"
                  :total="state.tableList.total">
                </el-pagination>
              </el-col>
            </el-row>
          </div>

        </div>
        <div class="right_box" v-if="state.currenType == 'custom'">
          <div style="width: 440px; margin: 50px 0 0 0">
            <el-form ref="customDate" :model="state.customDate" label-width="100px">
              <el-form-item label="跳转路径：" prop="url">
                <el-input v-model.trim="state.customDate.url" placeholder="请输入跳转路径" />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import listData from './list.json';
import linkData from './linkData.json';
import marketing from './marketing.json';
import { productCategoryList, productList, promiseList } from "/@/api/commodity";
const goodSkuListRef = ref()

const emit = defineEmits(['linkUrl'])
const state = reactive({

  constants: <EmptyObjectType>{},
  dialogVisible: false,
  defaultProps: {
    children: 'children',
    label: 'title',
    class: "font18"
  },
  basicsList: <EmptyArrayType>[],
  userList: <EmptyArrayType>[],
  distributionList: <EmptyArrayType>[],
  coupon: <EmptyArrayType>[],
  luckDraw: <EmptyArrayType>[],
  integral: <EmptyArrayType>[],
  lodingList: false,
  categoryData: listData.data,
  currenType: <any>'link',
  currenId: '',
  currenUrl: '',
  customDate: {
    url: '',
  },
  radioData: <any>'',
  linkId: <any>0,
  tableList: <EmptyObjectType>{},
  params: <EmptyObjectType>{
    pageNum: 1,
    pageSize: 20,
    keyWords: '',
    spuType: 1, // 普通商品
    showType: 1,//sku列表
  },
  columns: [
    { title: 'ID', key: 'id', width: 60 },
    { title: '页面名称', key: 'name', width: 150 },
    { title: '页面链接', key: 'url' },
  ],
  columns7: [
    { title: 'ID', key: 'id', width: 60 },
    { title: '分类名称', key: 'cate_name', tree: true },
    { title: '分类图标', slot: 'pic' },
  ],
  columns8: [
    { title: 'ID', key: 'id', width: 60 },
    { title: '商品图片', slot: 'image', width: 90 },
    { title: '商品名称', key: 'store_name' },
  ],
  bargain: [
    { title: 'ID', key: 'id', width: 60 },
    { title: '商品图片', slot: 'image', width: 90 },
    { title: '商品名称', key: 'title' },
  ],
  // news: [
  //   { title: 'ID', key: 'id', width: 60 },
  //   { title: '文章图片', slot: 'image_input', width: 90 },
  //   { title: '文章名称', key: 'title' },
  // ],
})
// 打开弹窗
const openDialog = () => {

  state.dialogVisible = true;
};
const closeDialog = () => {
  state.dialogVisible = false;
}
const handleSearch = () => {
  if (state.currenType == 'product') {
    mockData('product');
  }
  if (state.currenType == 'videoProduct') {
    mockData('videoProduct');
  }

}
const handleNodeClick = (data: any) => {
  state.params.keywords = ""
  state.tableList.list = [];
  state.linkId = null;
  state.radioData = null;
  state.currenType = data.type
  mockData(data.type);
}
const mockData = (type: any) => {
  let data = [];
  if (type == 'marketing_link') {
    data = marketing.data.list;
  } else if (type == 'link') {
    data = linkData.data.list;
  } else if (type == 'product_category') {
    state.lodingList = true;
    productCategoryList({ platformType: 0 }).then((res) => {
      state.tableList.list = res.results;
      state.lodingList = false;
    });
  } else if (type == 'product') {
    state.lodingList = true;
    state.params.spuType = ''

    productList(state.params).then((res) => {

      state.tableList = res.results;
      state.tableList.list = res.results.records;
      state.lodingList = false;
    });
  } else if (type == 'videoProduct') {
    state.lodingList = true;
    state.params.spuType = 6
    productList(state.params).then((res: any) => {
      state.tableList = res.results;
      state.tableList.list = res.results.records;
      state.lodingList = false;
    });
  } else if (type == 'seckill') {
    // state.lodingList = true;
    // seckillStoreListApi(state.params).then((res: any) => {
    //   state.tableList = res;
    //   state.tableList.list = res.records;

    //   state.lodingList = false;
    // });
  } else if (type == 'bargain') {
    // state.lodingList = true;
    // bargainListApi(state.params).then((res: any) => {
    //   state.tableList.list = res.records;
    //   state.lodingList = false;
    // });
  } else if (type == 'combination') {
    // state.lodingList = true;
    // combinationListApi(state.params).then((res: any) => {
    //   state.tableList.list = res.records;
    //   state.lodingList = false;
    // });
  } else if (type == 'news') {
    state.lodingList = true;
    promiseList(state.params).then((res: any) => {
      state.tableList = res.results;
      state.tableList.list = res.results.records;

      state.lodingList = false;
    });
  }
  // else if (type == 'micro') {
  //   this.lodingList = true;
  //   pagediyListApi(this.params).then(res => {
  //     this.tableList.list = res.records;
  //     this.lodingList = false;
  //   })
  // }
  let basicsList = <any>[];
  let distributionList = <any>[];
  let userList = <any>[];
  let integral = <any>[];
  let luckDraw = <any>[];
  let coupon = <any>[];
  data.forEach((e: any) => {
    if (e.type == 1) {
      basicsList.push(e);
    } else if (e.type == 2) {
      distributionList.push(e);
    } else if (e.type == 3) {
      userList.push(e);
    } else if (e.type == 4) {
      integral.push(e);
    } else if (e.type == 5) {
      luckDraw.push(e);
    } else {
      coupon.push(e);
    }
  });
  state.basicsList = basicsList;
  state.distributionList = distributionList;
  state.userList = userList;
  state.coupon = coupon;
  state.luckDraw = luckDraw;
  state.integral = integral;
}
const getUrl = (item: any) => {
  state.currenId = item.id;
  state.currenUrl = item.url;
}

const singleElection = (row: any) => {
  switch (state.currenType) {
    case 'product':
      state.linkId = row.skuId;
      break;
    case 'news':
      state.linkId = row.promiseId;
      break;
    default:
      state.linkId = row.id;
      break;
  }
}
const handleSubmit = (name: any) => {
  console.log(state)
  switch (state.currenType) {
    case 'product':
      emit('linkUrl', '/pages/goods_details/index?id=' + state.linkId);
      break;
    case 'videoProduct':
      emit('linkUrl', '/pages/goods_video_details/index?id=' + state.linkId);
      break;
    case 'seckill':
      emit('linkUrl', '/pages/activity/goods_seckill_details/index?id=' + state.linkId);
      break;
    case 'bargain':
      emit('linkUrl', '/pages/activity/goods_bargain_details/index?id=' + state.linkId);
      break;
    case 'combination':
      emit('linkUrl', '/pages/activity/goods_combination_details/index?id=' + state.linkId);
      break;
    case 'news':
      emit('linkUrl', '/pages/public/richtext?id=' + state.linkId);
      break;
    case 'product_category':
      emit('linkUrl', '/pages/goods/goods_cate/index');
      break;
    case 'custom':
      emit('linkUrl', state.customDate.url);
      break;
    case 'micro':
      emit('linkUrl', `/pages/activity/small_page/index?id=${state.linkId}`);
      break;
    default:
      emit('linkUrl', state.currenUrl);
      break;
  }
  state.dialogVisible = false;
}
const handleSizeChange = (val: any) => {
  state.params.pageSize = val;
  mockData(state.currenType);
}
const handleCurrentChange = (val: any) => {
  state.params.pageNum = val;
  mockData(state.currenType);
}
onMounted(() => {
  mockData('link')
})
defineExpose({
  openDialog,
});
</script>
<style scoped lang="scss">
:deep() {
    .el-tree-node__content {
        height: auto !important;
    } 
}
.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.pageQueryBoxArea {
  :deep(.el-select) {
    .el-input {
      width: 160px !important;
      height: 38px;
      line-height: 38px;
    }
  }





}




.table_box {
  display: flex;
  height: 70vh;
  align-items: flex-start;

  .left-tree-wrapper {
    width: 200px;
    border-right: 1px solid #ededed;

    .dirItem {
      display: flex;
      align-items: center;
      padding: 5px 15px;
    }

    .isActive {
      border-right: 2px solid var(--el-color-primary) !important;
      background-color: var(--el-color-primary-light-9);
    }

    :deep(.el-tree-node__content) {
      padding: 0;
    }
  }

  .right_box {

    flex: 1;
    padding-left: 15px;

    .radio {
      :deep(.el-radio__label) {
        display: none !important
      }
    }

    .cont {
      font-weight: 500;
      color: #000000;
      font-weight: bold;
    }

    .Box {
      display: flex;
      flex-wrap: wrap;

    }
  }

}
</style>